<template>
	<el-container>
		<el-aside width="150px">
			<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false" @node-click="typeClick">
			</el-tree>
		</el-aside>
		<el-container>
			<el-main class="nopadding">
				<el-container>
					<el-header>
						<div class="left-panel">
							<el-button type="primary" plain  @click="clean" > 清空日志</el-button>
						</div>
						<div class="right-panel">
							<div class="right-panel-search">
								<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
								<el-input v-model="search.keyword" placeholder="关键词" clearable ></el-input>
								<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
							</div>
						</div>
					</el-header>
					<el-header style="height:150px;">
						<scEcharts height="100%" :option="logsChartOption"></scEcharts>
					</el-header>
					<el-main class="nopadding">
						<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
							<el-table-column label="类型" prop="业务类型" width="120">
								<template #default="scope">
									<el-tag v-if="scope.row.businessType =='ADD'" >保存</el-tag>
									<el-tag v-if="scope.row.businessType =='EDIT'" >修改</el-tag>
									<el-tag v-if="scope.row.businessType =='DELETE'" >删除</el-tag>
									<el-tag v-if="scope.row.businessType =='LIST'" >查询列表</el-tag>
									<el-tag v-if="scope.row.businessType =='DETAIL'" >查看详情</el-tag>
									<el-tag v-if="scope.row.businessType =='EXPORT'" >导出</el-tag>
									<el-tag v-if="scope.row.businessType =='IMPORT'" >导入</el-tag>
									<el-tag v-if="scope.row.businessType =='LOGIN'" >登录</el-tag>
									<el-tag v-if="scope.row.businessType =='LOGOUT'" >登出</el-tag>
									<el-tag v-if="scope.row.businessType =='OTHER'" >其它</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作人员" prop="operName" width="120"></el-table-column>
							<el-table-column label="功能模块" prop="module" width="120"></el-table-column>
							<el-table-column label="操作功能名称" prop="title" width="180"></el-table-column>
							<el-table-column label="操作时间" prop="operTime" width="150"></el-table-column>
							<el-table-column label="租户名称" prop="tenantTitle" width="150"></el-table-column>
							<el-table-column label="部门名称" prop="departmentTitle" width="150"></el-table-column>
							<el-table-column label="客户端IP" prop="operIp" width="150"></el-table-column>
							<el-table-column label="请求参数" prop="operParam" width="300"></el-table-column>
							<el-table-column label="状态" prop="status" width="150"  >
								<template #default="scope">
									<el-tag v-if="scope.row.status =='0'">正常</el-tag>
									<el-tag v-if="scope.row.status =='1'" type="danger">异常</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="错误消息" prop="errorMsg" width="150"></el-table-column>
						</scTable>
					</el-main>
				</el-container>
			</el-main>
		</el-container>
	</el-container>

	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
		<info ref="info"></info>
	</el-drawer>
</template>

<script>
	import info from './info'
	import scEcharts from '@/components/scEcharts'

	export default {
		name: 'operation-log',
		components: {
			info,
			scEcharts
		},
		data() {
			return {
				infoDrawer: false,
				logsChartOption: {
					color: ['#5A55E4'],
					grid: {
						top: '0px',
						left: '10px',
						right: '10px',
						bottom: '0px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['2021-07-01']
					},
					yAxis: {
						show: false,
						type: 'value'
					},
					series: [{
						data: [120],
						type: 'bar',
						stack: 'log',
						barWidth: '15px'
					},
					]
				},
				category: [
					{
						label: '类型',
						children: [
							{label: '保存',btype:"ADD"},
							{label: '修改',btype:"EDIT"},
							{label: '删除',btype:"DELETE"},
							{label: '查询列表',btype:"LIST"},
							{label: '查看详情',btype:"DETAIL"},
							{label: '导出',btype:"EXPORT"},
							{label: '导入',btype:"IMPORT"},
							{label: '登录',btype:"LOGIN"},
							{label: '登出',btype:"LOGOUT"},
							{label: '其它',btype:"OTHER"}
						]
					},
				],
				date: [],
				apiObj: this.$API.system.esLog.list,
				search: {
					keyword: "",
					startDate:"",
					endDate:"",
					businessType:""
				}
			}
		},
		methods: {
			async getEchartsData(){
				var res = await this.$API.system.esLog.echartsList.get();
				if(res.success){
					//res.data;
					this.logsChartOption.xAxis.data = res.data.date;
					this.logsChartOption.series[0].data = res.data.count;
				}
			},
			upsearch(){
				if(this.date && this.date[0]){
					this.search.startDate = this.$TOOL.dateFormat(this.date[0]);
					this.search.endDate = this.$TOOL.dateFormat(this.date[1]);
				}else{
					this.search.startDate ="";
					this.search.endDate ="";
				}
				console.log(JSON.stringify(this.search))
				this.$refs.table.reload(this.search)
			},
			//树点击事件
			typeClick(data){
				this.search.businessType = data.btype;
				this.upsearch();
			},
			rowClick(row){
				this.infoDrawer = true
				this.$nextTick(() => {
					this.$refs.info.setData(row)
				})
			},
			clean(){
				this.$confirm(`确定要清空所有日志吗？`, '提示', {
					type: 'warning'
				}).then(async() => {
					const loading = this.$loading();
					await this.$API.system.esLog.clean.delete();
					this.upsearch();
					loading.close();
					this.$message.success("操作成功")
				})
			}
		},
		mounted() {
			this.getEchartsData();
		}
	}
</script>

<style>
</style>
